<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>  
<body>  
    <div> 
       闪
    </div> 
</body>
<script>
    //获取整个盒子
    var box = document.querySelector("div")
    console.log(box) 
    var times = null  
    //点击盒子 
    box.onmouseover = function (){ 
        console.log(111)  
        //定义一个变量
        var i = 0  
        clearInterval(times) 
        times = setInterval(function () {  
            // box.style.background = 'skyblue'
            box.style.display=i++ % 2 ? 'none' : 'block';
            i > 6 && (clearInterval(times))
        }, 30) 
    }
</script>

</html>
<style>
    div {
        width: 100%;
        height: 800px;
        background-color: hotpink;
        margin: 0 auto;
        text-align: center;
        line-height: 200px;
        
    }
</style>